<template>
  <div class="chain-container wei_sellOffer-container">
      <div class="invite-1200">
          <div class="wy-main-title" style="margin-top:40px;"><p style="padding-bottom: 30px;">首页 / 特色物流 /  城市物流 / <span>{{keyValues}}</span></p></div>
          <a-form layout="inline">
              <a-form-item label='选择城市' :span='10'>
                <a-input v-model="city"  placeholder="请选择城市" :span='14' style='width:190px;' @click="magSvgShowMap('departureCar')">
               </a-input>
             </a-form-item>
<!--               <a-form-item label='出发地' :span='10'>
                <a-input v-model="fromCity"  placeholder="请选择车辆常驻地" :span='14' style='width:190px;'   readOnly @click="magSvgShowMap('departureCar')">
               </a-input>
             </a-form-item>
              <a-form-item label='到达地'>
                <a-input v-model="toCity" placeholder="请选择车辆到达地" style='width:190px;'  readOnly @click="magSvgShowMap('destinationCar')">
               </a-input>
              </a-form-item> -->
                <a-form-item>
                      <a-button class='ant-btn-primary' type="primary" @click="tourbanFreight()">搜索</a-button>
               </a-form-item>
               <a-form-item>
                      <a-button @click="reset()">重置</a-button>
               </a-form-item>
          </a-form>
           <!-- 数据展示 -->
          <div class="tender-title">
                <span></span>
                <h2>{{keyValues}}</h2>
          </div>
          <div class="tender-line"></div>
          <div class="tender-list sell-goods-list wy-m-t-20">
                  <div class="tender-list-title">
                        <ul>
                              <li>车辆信息</li>
                              <li>发布信息</li>
                              <li>价格</li>
                              <li>查看</li>
                        </ul>
                  </div>
                  <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="supplyList">
                        <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                            <div class="invite-box-conent">
                                    <div class="goods-pic">
                                          <img v-lazy="FileUploadUrl2+item.vehiclePicsPath">
                                    </div>
                                    <div class="goods-name">
                                          <h4>{{item.vehicleTypeValue}}米</h4>
                                          <div style="margin-top: 11px;">
                                            <p>车身：<span>{{item.length}}</span></p>
                                            <p style="margin-top: 5px;">载重：<span>{{item.weight}}吨</span></p>
                                            <p style="margin-top: 5px;">体积：<span>{{item.volume}}立方米</span></p>
                                            <p style="margin-top: 5px;max-width:185px;overflow:hidden;text-overflow: ellipsis;
    white-space: nowrap;" :title="item.description">说明：<span>{{item.description}}</span></p>
                                          </div>
                                   </div>
                            </div>
                            <div class="invite-box-conent">
                                    <h4> {{item.company}}</h4>
                                    <div class="useStar">
                                          <span>用户星级</span>
                                          <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                                          <div class="attestaion">{{item.attestationStatusValue}}</div>
                                    </div>
                            </div>
                            <div class="invite-box-conent">
                                  <p class="wei_table_p1">
                                    <span>{{item.startingMileage}}公里以内：</span>
                                    <i class="goods-money">{{item.startingPrice}}</i>
                                    <span class="goods-kg">元/公里</span>
                                  </p>
                                  <p class="wei_table_p2">
                                    <span>{{item.startingMileage}}公里以上：</span>
                                    <i class="goods-money">{{item.mileagePrice}}</i>
                                    <span class="goods-kg">元/公里</span>
                                  </p>
                            </div>
                            <div class="invite-box-conent">
                                      <a-button v-if="loggedIn" class='ant-btn-primary goods-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                                      <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary goods-sell' type="primary">立即沟通</a-button></router-link>
                            </div>
                       </a-list-item>
                  </a-list>
          </div>
      </div>
      <!-- 弹框 -->
      <Elastic :userId="userId"  ref='elastic'></Elastic>
          <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
  </div>
</template>

<script>
import { chainData } from '@/utils/chainData'
import Elastic from '@/components/dialog/Elastic'
import AuthMixin from '~/mixins/auth'
import { environment } from '@/server/environment'
export default {
  mixins: [ AuthMixin ],
   components: {
      Elastic,
    },
  data () {
    return {
      supplyList:[],
      userId:'',
      city:'',
      fromCity:'',
      FileUploadUrl2:environment.FileUploadUrl2,
      name:'',
      keyValues:'',
      toCity:'',
       pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showSizeChanger: true,
          total:10,
          showTotal: (total, range) => `共 ${total} 条记录`,
          onChange: (page) => {
            this.pagination.defaultCurrent = page
            this.tourbanFreight()
        }
        },
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  created(){
    this.name = this.$route.query.name;
    this.infoCommonDict(35)
    this.tourbanFreight()
  },
  methods:{
    //重置
    reset(){
      this.city = ''
      this.tourbanFreight()
    },
    //留言板
    elasticShowModal(d){
          this.userId = d;
         this.$refs.elastic.showModal(d);
    },
  // 省市地图回调
    mapSvgCall (d) {
        console.log(d)
        if(d.name == 'departureCar'){
          this.city = d.city
          //  this.form.setFieldsValue({
          //  departureCar:d.city
          // });
         }else{
          this.toCity = d.city
          //  this.form.setFieldsValue({
          //  destinationCar:d.city
          // });
         }
       
        // this[d.name] = d.provCityArea;
      },
            //新闻城市货运
      async tourbanFreight () {
          var params={
            pageSize:this.pagination.defaultPageSize,
            pageNum: this.pagination.defaultCurrent,
            serviceType:this.name,
            approvalStatus:107//通过
          }

          if(this.city){
            console.log(11)
            params.city = this.city
          }
          const res = await this.$store.dispatch('news/tourbanFreight',params)
          if (res.status) {
            this.supplyList = res.data.rows;

            this.pagination.total = res.data.total;

          } 
      },
                  // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageIndex: 1
          })
          if (res.status) {
            switch(type){
              case 35: 
                let datas = res.data.rows;
                if(datas&&datas.length){
                    for(var i=0;i<datas.length;i++){
                      if(this.name == datas[i].dictKey){
                        this.keyValues = datas[i].dictValue;
                        break;
                      }
                    }
                }

                break;
            }
          }
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      },
  }
}
</script>
<style lang="scss">
@import "@/assets/css/chain/sellOffer.scss";
.wei_sellOffer-container{
    .invite-1200{
      .ant-list-item{
        height: 183px;
      }
    .invite-box-conent{
      .goods-pic{
        width: 190px;
        height: 140px;
      }
    }
    .invite-box-conent:first-child{
      width:416px;
    }
    .invite-box-conent:nth-child(2){
       width:346px;
       margin-top: 54px;
    }
     .invite-box-conent:nth-child(3){
     width:242px;
    }
     .invite-box-conent:last-child{
      width: 193px;
      margin-top: 23px;
    }

    .wei_table_p1{
      height: 40px;
      line-height: 40px;
      margin-top: 50px;
    }
    .wei_table_p2{
      height: 40px;
      line-height: 40px;
    }
  }
  .tender-list{
    .tender-list-title{
      width:1200px;
      height:40px;
      background:#F7F7F7;
      border-bottom:1px solid #D8D8D8;
      ul{
        margin:0;
        li{
            float:left;
            text-align:center;
            line-height:40px;
            font-size:16px;
            font-weight:400;
            color:#333333;
        }
        li:first-child{
          width:416px;
          border-right:1px solid  #EFEFEF;
        }
        li:nth-child(2){
          width:346px;
          border-right:1px solid  #EFEFEF;
        }
        li:nth-child(3){
          width:242px;
          border-right:1px solid  #EFEFEF;
        }
        li:last-child{
           width:193px;
           text-align: center;
        }
      }
    }
  }
}



</style>